<template>
	<view class="u-page">
		<view class="t">
			<view style="flex:1">
				<xbutton @click="fh" style="display: flex;" mini txt="返回"></xbutton>
			</view>
			<view style="flex:2">
				<view class="a">邀请好友（收徒）</view>
			</view>
			<view style="flex:1">

			</view>
		</view>
		<view class="goodman">
			1. 当好友通过您的邀请链接访问香了么后，只要TA在任意时间下单，均为有效；
			<br>
			2. 邀请好友注册本站可以获得一级返利，好友通过本站到干饭之后，你也可以获得最高30%提成。
			<br>
			<!-- 3. 好友邀请别的好友，你也可以获得最高10%提成。
			<br> -->
		</view>
		<xbutton @click="fh" style="display: flex;" txt="点击邀请好友"></xbutton>
		<!-- 	<u-tabs lineWidth="30" lineColor="#f56c6c" :activeStyle="{
						color: '#999ca2',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#686b6f',
						transform: 'scale(1)'
					}" style="margin-top: 20rpx;" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :list="list1"
			@change="click"></u-tabs> -->
		<u-list style="margin-top: 20rpx;">
			<u-list-item v-for="(item, index) in list" :key="index" style="margin-top: 20rpx;">
				<view style="display: flex;justify-content: space-around;">
					<view>{{item.invite.name}}</view>
					<view v-if="item.status==0">
						等待ta下单
					</view>
					<view v-else-if="item.status==1">
						邀请成功
					</view>
					<view v-else-if="item.status==2">
						邀请失败
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	import xbutton from "../vue/xbutton.vue"
	export default {
		data() {
			return {
				list1: [{
					name: '小伙伴'
				}, {
					name: '小伙伴的小伙伴'
				}],
				list: [{
					status: 0,
					invite:{
						name:'1'
					}
				}]
			}
		},
		methods: {
			fh() {
				uni.navigateBack()
			}
		},
		mounted() {
			let that = this
			this.$http.postf('invite/page', {
				current: 1,
				size: 10
			}).then(res => {
				let x =  JSON.parse(res.data)
				if (x.meta.code == 200) {
					that.list = x.data.records
				} else if (x.meta.code == 400) {

				}

			})
		},
		components: {
			xbutton
		}
	}
</script>

<style>
	.goodman {
		font-size: 20px;
		-webkit-mask-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
		background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-background-size: 200% 100%;
		animation: bgp 5s infinite linear;
	}

	@-webkit-keyframes bgp {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: -100% 0;
		}
	}

	.t {
		line-height: 40px;
		font-size: 14px;
		text-align: center;
		background: #fb4e3a;
		border: 1px solid #ea3520;
		border-radius: 5px;
		color: #fff;
		margin-bottom: 12px;
		margin-top: 50rpx;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.a {
		text-indent: 8px;
	}
</style>
